iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
自我挑戰組

從新手開始TypeScript系列 第 14

Day14-TypeScript(TS)使用成員存取修飾詞(Access Modifier)

  • 分享至 

  • xImage
  •  

今天要來介紹TypeScript(TS)使用成員存取修飾詞(Access Modifier),

  • 控制成員可視性
  • 預設成員隱含為public
  • 包含publicprotectedprivate

成員存取修飾詞(Access Modifier)

可以用來設定類別中成員(包含屬性與函式)的可視性
包含publicprotectedprivate

三者差異如下,

public : (預設)不受限外部程式碼存取
protected : 應用在有繼承關係的類別程式碼可存取
private : 只有類別中的程式才可以存取此成員

在TS中,通常實體屬性(Intance Property)會宣告在建構函式(Constructor)之前,
屬性的語法包含三個部分,

  1. 選擇性的成員存取修飾詞
  2. 屬性名稱
  3. 屬性型別

另外,
函式(function)定義時不需要撰寫「function」關鍵字,
但函式前也可以使用成員存取修飾詞來設定可視性
範例如下,

使式方式一

可以先加入成員存取修飾詞
再將參數帶入建構函式存取成員。

class Employee {

    public AAA: number;
    protected BBB: number;
    private CCC: number;

    //建構函式
    constructor(aaa: number, bbb: number, ccc: number) {
        this.AAA = aaa;
        this.BBB = bbb;
        this.CCC = ccc;
}

    //函式
    showInfo() {
        return this. AAA + "-" + this.BBB + "-" + this.CCC ;
    };
}
使式方式二

也可以直接將成員存取修飾詞寫在建構函式內,
用作結果和上面方式是相同的,
如此一來可以減少大量宣告時的程式碼喔。

class Employee {

    //建構函式
    constructor(public AAA: number,protected BBB: number ,private CCC: number) {}

    //函式
    showInfo() {
        return this. AAA + "-" + this.BBB + "-" + this.CCC ;
    };
}

今日結語

今天先講成員存取修飾詞的基礎概念,
之後再搭配實作撰寫會更能理解這三項的差異與使用方法,
到時會再提起喔,
大家加油。


上一篇
Day13-TypeScript(TS)修改成員
下一篇
Day15-TypeScript(TS)的存取子(Accessors)
系列文
從新手開始TypeScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言